<template>
  <div class="recordQuote">
    <van-nav-bar
      :title="title"
      left-arrow
      fixed
      :border="false"
      @click-left="clickLeft"
    >
      <template #right>
        <van-icon name="search" size="20" v-if="!showBtn" @click="handleSearch"
          ><span style="color: #fff; font-size: 20px">查询</span>
        </van-icon>
        <van-icon name="success" size="20" v-if="showBtn" @click="handleSave"
          ><span style="color: #fff; font-size: 20px">保存</span>
        </van-icon>
      </template>
    </van-nav-bar>
    <van-form scroll-to-error>
      <van-row type="flex">
        <van-col span="12">
          <van-field
            v-model="materialType"
            name="materialType"
            label="物料类型"
            required
            input-align="center"
            :rules="[{ required: true, message: '请选择物料类型' }]"
          >
            <template #input>
              <material-type v-model="materialType" />
            </template>
          </van-field>
        </van-col>
        <van-col span="12">
          <van-field
            v-model="materialCode"
            name="materialCode"
            label="物料名称"
            required
            input-align="center"
            :rules="[{ required: true, message: '请选择物料' }]"
          >
            <template #input>
              <material-name
                :materialType="materialType"
                v-model="materialCode"
              />
            </template>
          </van-field>
        </van-col>
        <van-col span="12">
          <van-field
            v-model="batchID"
            name="batchID"
            label="批号"
            required
            clickable
            input-align="center"
            :rules="[{ required: true, message: '请输入批号' }]"
          >
            <template #input>
              <batch-list-quote v-model="batchID" :materialCode="materialCode">
              </batch-list-quote>
            </template>
          </van-field>
        </van-col>
        <van-col span="12">
          <van-field
            v-model="testID"
            name="testID"
            label="检验编号"
            required
            readonly
            input-align="center"
            @click="showTest = true"
            :rules="[{ required: true, message: '请选择检验编号' }]"
          >
          </van-field>
        </van-col>
      </van-row>
    </van-form>
    <van-popup
      v-model="showTest"
      round
      position="bottom"
      :style="{ height: '50%' }"
    >
      <van-picker
        show-toolbar
        :columns="testList"
        @cancel="showTest = false"
        @confirm="onConfirm"
      />
    </van-popup>
  </div>
</template>

<script>
import {
  Form,
  Field,
  RadioGroup,
  Radio,
  Button,
  Popup,
  Toast,
  Col,
  Row,
  Tag,
  Checkbox,
  CheckboxGroup,
  Cell,
  CellGroup,
  Picker,
  List,
  SwipeCell,
  Notify,
  NavBar,
  Icon,
} from "vant";
import MaterialType from "@/components/MaterialType";
import MaterialName from "@/components/MaterialName";
import BatchListQuote from "./BatchListQuote.vue";
import { getReportId } from "@/api/base";
import { GetAttributeValue } from "@/api/check";
export default {
  components: {
    [Form.name]: Form,
    [Field.name]: Field,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Button.name]: Button,
    [Popup.name]: Popup,
    [Toast.name]: Toast,
    [Col.name]: Col,
    [Row.name]: Row,
    [Tag.name]: Tag,
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Picker.name]: Picker,
    [List.name]: List,
    [SwipeCell.name]: SwipeCell,
    [Notify.name]: Notify,
    [NavBar.name]: NavBar,
    [Icon.name]: Icon,
    MaterialType,
    MaterialName,
    BatchListQuote,
  },
  props: {
    applySource: {
      type: String,
    },
  },
  data() {
    return {
      title: "引用",
      token: "",
      materialType: "",
      materialCode: "",
      batchID: "",
      testID: "",
      showTest: false,
      testList: [],
      treeNode: "",
      recordName: "",
      showBtn: false,
    };
  },
  watch: {
    materialCode(val) {
      this.batchID = "";
    },
    batchID(val) {
      if (val) {
        this.getTestId();
      }
    },
  },
  methods: {
    clickLeft() {
      this.$router.push({
        name: "configDetail",
        params: {
          paramData: JSON.stringify(this.treeNode),
        },
      });
    },
    handleSave() {
      var params = {
        Token: this.token,
        BillType: 1,
        BatchID: this.batchID,
        MaterialCode: this.materialCode,
        MaterialType: this.materialType,
      };
      CreateOrUpdateAddTest(params)
        .then((response) => {
          if (response.ErrorCode == "0") {
            this.$router.push({
              name: "configDetail",
            });
          }
        })
        .catch(() => {});
    },
    getTestId() {
      var params = {
        pageModel: {
          Search: [this.materialCode, this.batchID],
          Token: this.token,
        },
      };
      getReportId(params)
        .then((response) => {
          if (response.ErrorCode == "0") {
            var res = response.Result;
            var dataArr = [];
            res.map((item) => {
              dataArr.push({
                value: item.testID,
                text: item.testID,
              });
            });
            this.testList = dataArr;
          }
        })
        .catch(() => {});
    },
    onConfirm(val) {
      this.testID = val.value;
      this.showTest = false;
    },
    handleSearch() {
      var params = {
        TestID: this.testID,
        RecordName: this.recordName,
        Token: this.token,
      };
      GetAttributeValue(params)
        .then((response) => {
          if (response.ErrorCode == "0") {
            var res = response.Result;
            if (res && res.length) {
              this.showBtn = true;
            }
          }
        })
        .catch(() => {});
    },
  },
  async created() {
    this.treeNode = JSON.parse(this.$route.params.paramData);
    this.recordName = this.$route.params.recordName;
    this.token = localStorage.getItem("tokenKey");
  },
};
</script>

<style lang="less" scoped>
// /deep/ .van-field__body {
//   border: 1px solid #ccc;
// }
.van-row {
  background: #fff;
}
.van-hairline-unset--top-bottom::after,
.van-hairline--top-bottom::after {
  border-width: 0;
}

.recordQuote {
  padding-top: 40px;
  .custom-field {
    /deep/ .van-field__control--custom {
      > .van-cell {
        width: auto;
      }

      .wapper {
        flex: 1;
        width: auto;
      }
    }
  }
  /deep/.van-field__body {
    border: 1px solid #ccc;
    border-radius: 2px;
  }
  /deep/.van-picker__toolbar {
    height: 1rem !important;
  }
}
/deep/.van-tree-select__item {
  line-height: 1rem;
}
/deep/.van-popup {
  overflow-y: hidden;
}
.checkbox-con {
  height: calc(100% - 1.2rem);
}
</style>